<header class="main-header">
  <a href="javascript:void(0);" class="logo" style="display: block;">
    <!-- mini logo for sidebar mini 50x50 pixels -->
    <span class="logo-mini">分析</span>
    <!-- logo for regular state and mobile devices -->
    <span class="logo-lg" style="font-size: 15px;margin: 0 -5px;">雪城大气超级站综合分析平台</span>
  </a>
  <!-- Header Navbar: style can be found in header.less -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" style="height: 50px;">
      <span class="sr-only">Toggle navigation</span>
    </a>
    <div class="navbar-custom-menu pull-left">
      <ul class="nav navbar-nav">
        <li class="dropdown notifications-menu" *ngFor="let menu of sysMenu;index as i;" (click)="setSysMenu(menu.id)" [class.active] = 'menuSysId == menu.id'>
          <a style="height: 50px;" *ngIf="menu.isExistUrl == '1'"  [routerLink]="menu.url || ''" [target]=" menu.isBlank == '1' ? '_blank' : '_self'">
            <span>{{menu.name}}</span>
          </a>
          <a style="height: 50px;" *ngIf="menu.isExistUrl != '1'" href="javascript:void(0)">
            <span>{{menu.name}}</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- Navbar Right Menu -->
    <!-- 平铺 -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        <li class="dropdown tasks-menu" (mouseleave)="dropDownHide($event)">
          <a  href="javascript:void(0);" (click)="warnInfo(warnSite)" #warnSite>
            <i class="fa fa-bell-o "></i>
            <span class="label label-warning"
                  style="left: 20px;border-radius: 50%;width: 16px;height: 16px;line-height: 15px;padding: 0;"
                  *ngIf="warnInfoArr.length>0">
              {{warnInfoArr.length}}</span>
            <span style="display: inline-block;margin-left: 2px;">报警信息</span>
          </a>
          <div class="dropdown-menu" style="padding:10px;min-height: 55px;max-height: 230px;width: 320px;overflow: auto;">
            <ul class="one-peach-info-alert-detail">
              <li *ngFor="let data of warnInfoArr;index as i" class="real" (click)="jumpRecordDetail(recordSite,data)"
                  #recordSite>
                <div>{{data.time}}</div>
                <div>
                  {{data.content}}
                </div>
              </li>
            </ul>
            <div style="width:100%;text-align: center;margin-bottom: 10px;">
              <button class="btn one-peach-info-loadmore" (click)="jumpHistoryRecord(loadMore)" #loadMore>更多数据</button>
            </div>
          </div>
        </li>
        <!-- User Account: style can be found in dropdown.less -->
        <li class="dropdown user user-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" (click)="jumpMe()">
            <img src="/assets/v1/css/portal/datav/imgs/icon-user.png" class="user-image" alt="User Image">
            <span class="hidden-xs">{{myName}}</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);" (click)="logout()" title="退出">
            <i class="fa fa-sign-out"></i>
          </a>
        </li>
        <!-- Control Sidebar Toggle Button -->
        <li>
          <a href="javascript:void(0);" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
        </li>
      </ul>
    </div>
    <!-- 下拉 -->
    <!--<div class="navbar-custom-menu">-->
      <!--<ul class="nav navbar-nav">-->
        <!--<li class="dropdown notifications-menu">-->
          <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="height: 50px;">-->
            <!--<img src="assets/imgs/portal/modPwd.png" class="user-image" alt="User Image" style="margin-top: -6px;">-->
            <!--<span class="hidden-xs">{{myName}}</span>-->
          <!--</a>-->
          <!--<ul class="dropdown-menu" style="width: auto;right: 0;">-->
            <!--<li>-->
              <!--&lt;!&ndash; inner menu: contains the actual data &ndash;&gt;-->
              <!--<ul class="menu">-->
                <!--<li>-->
                  <!--<a href="javascript:void(0)" (click)="jumpHistoryRecord()">-->
                    <!--<i class="fa fa-bell-o "></i>-->
                    <!--<span class="label label-warning"-->
                          <!--style="left: 20px;border-radius: 50%;width: 16px;height: 16px;line-height: 15px;padding: 0;"-->
                          <!--*ngIf="warnInfoArr.length>0">-->
              <!--{{warnInfoArr.length}}</span>-->
                    <!--<span style="display: inline-block;margin-left: 2px;">报警信息</span>-->
                  <!--</a>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<a href="javascript:void(0)" (click)="jumpMe()">-->
                    <!--<i class="fa fa-user-circle-o"></i>-->
                    <!--<span>个人中心</span>-->
                  <!--</a>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<a href="javascript:void(0)" (click)="logout()" title="退出">-->
                    <!--<i class="fa fa-sign-out"></i>-->
                    <!--<span>退出</span>-->
                  <!--</a>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<a href="javascript:void(0)" data-toggle="control-sidebar">-->
                    <!--<i class="fa fa-gears"></i> <span>设置</span>-->
                  <!--</a>-->
                <!--</li>-->
              <!--</ul>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</li>-->
      <!--</ul>-->
    <!--</div>-->
  </nav>
</header>
